<!-- ------------------收益明细------------- -->
<template>
	<view class="root">
		<view class="symx_t">
			<view v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
				<view :class="{ active: tabIndex === index }">{{ tab }}</view>
			</view>
		</view>
		<scroll-view scroll-y :style="{ marginTop: `30rpx`, flex: 1, overflow: `hidden` }">
			<view class="sy_list">
				<view v-if="incomes.length" class="th">
					<label :style="{ flex: 1 }">设备编号</label>
					<label :style="{ flex: 1.2 }">设备型号</label>
					<label :style="{ flex: 1 }">收益</label>
					<label :style="{ flex: 1 }">日期</label>
				</view>
				<view class="tr" v-for="(item, index) in incomes" :key="index">
					<label :style="{ flex: 1 }">{{ item.kjbh }}</label>
					<label :style="{ flex: 1.2 }">{{ item.kjmc }}</label>
					<label :style="{ flex: 1 }">{{ item.ug_money }} {{ tabs[tabIndex] }}</label>
					<label :style="{ flex: 1 }">{{ item.ug_gettime | removeTime }}</label>
				</view>

				<view v-if="!incomes.length" class="fs-28 text-center mt-30"> 暂无数据 </view>
			</view>
		</scroll-view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: ["USDT", "ETH", "BTC", "FIL"],
				incomes: [],
			};
		},
		filters: {
			removeTime(date) {
				return date.substr(0, 10);
			},
		},
		onLoad() {
			this.changeTab(0);
		},
		methods: {
			changeTab(val) {
				uni.showToast({ title: "Loading...", icon: "loading" });
				this.tabIndex = val;
				this.incomes = [];
				this.$request
					.get("/Home/info/kuangcheshouyi", {
						huobi: this.tabs[this.tabIndex].toLocaleLowerCase(),
					})
					.then(({ data }) => {
						this.incomes.push(...data);
						uni.hideToast();
					});
			},
		},
	};
</script>
<style>
	page,
	.root {
		height: 100%;
	}
</style>
<style lang="scss">
	.root {
		display: flex;
		flex-direction: column;
	}
	.symx_t {
		background: #fff;
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		z-index: 99;

		> view {
			height: 100%;
			width: 50%;
			text-align: center;
			font-size: 34rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #1a1a1a;
			display: flex;
			justify-content: center;
			align-items: center;

			> view {
				border-bottom: 4rpx solid #ffffff;
			}

			.active {
				color: #2a62ff;
				border-bottom: 4rpx solid #2a62ff;
			}
		}
	}

	.sy_list {
		padding: 0 30rpx;
		box-sizing: border-box;
		.th {
			display: flex;
			justify-content: space-around;
			font-size: 28rpx;
			font-weight: 600;
			label {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				flex: 1;
			}
		}

		.tr {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			color: #1a1a1a;
			margin: 30rpx 0;
			label {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				flex: 1;
			}
		}
	}
</style>
